<template>
  <view class="content">
    <view class="block1">
      <!-- 轮播图 -->
      <view class="slideshow">
        <!-- <swiper class="swiper" :indicator-dots="true" :autoplay="true" interval="3000" circular
          indicator-color="#ccc" indicator-active-color="white">
          <swiper-item v-for="(image, index) in storageData.themeImg" :key="index">
            <image :src="image" mode="widthFix" class="swiper-image"></image>
          </swiper-item>
        </swiper> -->
        <u-swiper :autoplay="false" :list="swiperList" height="249" keyName="url"></u-swiper>
      </view>
      <!-- 热门路线 卡片 -->
      <view class="Hot-route-card">
        <!-- 标题 -->
        <view class="title">
          {{ storageData.name }}
        </view>
        <!-- 标签 -->
        <view class="labelContainer">
          <!-- <view class="label" v-for="(labelItem, labelIndex) in label" :key="labelIndex">
            <tui-tag type="orange" shape="square">{{ labelItem }}</tui-tag>
          </view> -->
          <view class="label">
            <tui-tag shape="square" type="orange">{{ storageData.type }}</tui-tag>
          </view>
        </view>
        <view class="route-text">
          {{ storageData.introduce }}
        </view>
        <view class="hot-price">
          <!-- 热度 -->
          <view class="hot">
            <view class="hot-image">
              <image src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/%E8%B7%AF%E5%BE%84%20404.png">
              </image>
            </view>
            <view class="hot-text">{{ storageData.hot }}</view>
          </view>
          <!-- 价格 -->
          <view class="price">
            <view class="commodity-prices-1">
              ¥
            </view>
            <view class="commodity-prices-2 ">
              {{ storageData.lineFee }}
            </view>
            <view class="commodity-prices-3 ">
              /人起
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 路线简介 -->
    <view class="Routebrief">
      <view class="type">
        <view class="Routetype">路线类型</view>
        <view class="RouteLabel-1">
          <!-- 	<view class="RouteLabel" v-for="(labelItem, labelIndex) in RouteLabel" :key="labelIndex">
            <tui-tag type="blue" plain>{{ labelItem }}</tui-tag>
          </view> -->
          <view class="RouteLabel">
            <tui-tag plain type="blue">{{ storageData.lineTypeName }}</tui-tag>
          </view>
        </view>
      </view>
      <!-- 分割线 -->
      <tui-divider height="35"></tui-divider>
      <!-- 旅行社/机构 -->
      <view class="travelContainer">
        <view class="travel">旅行社/机构</view>
        <view class="HeadPortrait-text">
          <view class="HeadPortrait">
            <!-- <image
              src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/1-2-1%E6%99%AF%E7%82%B9%E8%AF%A6%E6%83%85/%E7%8C%AB%E5%A4%B4%E5%83%8F.png">
            </image> -->
          </view>
          <view class="travel-text">{{ storageData.userName }}</view>
        </view>
      </view>
      <!-- 分割线 -->
      <tui-divider height="35"></tui-divider>
      <!-- 报名截止时间 -->
      <view v-if="storageData.lineType != 5" class="signUp-time">
        <veiw class="signUp">报名截止时间</veiw>
        <veiw class="time">{{ storageData.signEndTime }}</veiw>
      </view>
      <!-- 分割线 -->
      <tui-divider v-if="storageData.lineType != 5" height="35"></tui-divider>
      <!-- 出行日期 -->
      <view v-if="storageData.lineType != 5" class="trip">
        <view class="trip-1">
          出行日期
        </view>
        <view class="trip-date">
          {{ storageData.startDate }}
        </view>
      </view>
      <!-- 分割线 -->
      <tui-divider v-if="storageData.lineType != 5" height="35"></tui-divider>
      <view class="travel-time">
        <view class="travel-time1">
          行程时间
        </view>
        <view class="travel-time2">{{ storageData.planTime }}</view>
      </view>
    </view>
    <!-- 旅行路线 -->
    <view class="itinerary">
      <!-- tab -->
      <view class="tab-1">
        <tui-tab :size="40" :tabs="tabs" backgroundColor="#00c96000" bold color="#999" selectedColor="#4186F5"
                 sliderBgColor="#4186F5" @change="handleChange"></tui-tab>
      </view>
      <view v-if="current == 0">
        <view class="layout">
          <!-- 地图 -->
          <view class="map">
            <map :include-points="markers" :markers="markers" :polyline="polyline">
            </map>
          </view>
          <!-- 景点数量 -->
          <view class="Number-of-attractions">
            共{{ storageData.scenicCount }}个景点丨{{
              storageData.allTaskCount
            }}个任务丨全程{{ storageData.distance / 1000 }}km
          </view>
          <!--景点卡片-->
          <view v-for="(scenicSpot, index) in (isUnfolded ? scenicMore : scenic)" :key="index"
                class="Attraction-card">
            <!-- 纵向布局 -->
            <view class="Verticallayout">
              <!-- 🚩路线标志 -->
              <view class="icon">
                <image
                    src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/1-2-1%E6%99%AF%E7%82%B9%E8%AF%A6%E6%83%85/%E8%B7%AF%E5%BE%84%20114.png">
                </image>
              </view>
              <!-- 虚线 -->
              <view v-if="index < (isUnfolded ? scenicMore.length : scenic.length) - 1" class="line">
              </view>
            </view>
            <!-- 纵向布局 -->
            <view class="layout-4">
              <!-- 标题、简介、照片 -->
              <view class="brief-introduction" @click="scenicEvent(index)">
                <view class="title-introductory">
                  <!-- 标题 -->
                  <view class="title">
                    {{ scenicSpot.name }}
                  </view>
                  <!-- 简介 -->
                  <view class="introductory">
                    {{ scenicSpot.notice }}
                  </view>
                </view>
                <!-- 照片 -->
                <view class="picture">
                  <image :src="scenicSpot.img[0]">
                  </image>
                </view>
              </view>
              <!-- 导航、玩法 -->
              <view class="navigation-playing">
                <view class="navigation">
                  <!-- 定位图标 -->
                  <view class="navigation-icon">
                    <tui-icon color="#4286F5" name="gps" size="20"></tui-icon>
                  </view>
                  <view class="navigation-text">
                    {{ scenicSpot.location }}
                  </view>
                  <view class="navigation-text2">|</view>
                  <view class="navigation-icon2" @click="navigationClick(index)">
                    <tui-icon color="#4286F5" name="send" size="20"></tui-icon>
                  </view>
                  <view class="navigation-text3" @click="navigationClick(index)">
                    导航
                  </view>
                </view>
                <view class="playing" @click="playTask(index)">
                  <view class="playing-icon">
                    <tui-icon color="#4286F5" name="strategy" size="20"></tui-icon>
                  </view>
                  <view class="playing-text">玩法任务：</view>
                  <view class="playing-text2">{{ scenicSpot.taskCount }}个</view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 展开按钮，仅当景点数量大于3时渲染 -->
        <view v-if="(scenicMore.length )> 3" class="unfold-icon" @click="toggleUnfold">
          <view class="unfold">
            {{ isUnfolded ? '收起' : '展开' }}
          </view>
          <view class="unfold-icon-1">
            <tui-icon v-if="isUnfolded" :size="15" color="#4286F5" name="up"></tui-icon>
            <tui-icon v-else :size="15" color="#4286F5" name="down"></tui-icon>

          </view>
        </view>
      </view>

      <view v-if="current == 1">
        <view class="uParseBox">
          <u-parse :content="storageData.texts[0].text"></u-parse>
        </view>
        <view class="otherBox">
          <view class="otherInformation">
            路线其他信息
          </view>
          <view v-if="storageData.lineShops.length > 0" class="uParseItem">
            <view class="uParseLeft">
              <view class="uParseSpot">
              </view>
              <view class="uParseText">
                就餐点:
              </view>
            </view>
            <view v-for="(item,index) in storageData.lineShops" :key="index" class="">
              {{ (index + 1) < storageData.lineShops.length ? item.shopName + '/' : item.shopName }}
            </view>
          </view>

          <view v-if="storageData.teamUniform.length > 0" class="uParseItem">
            <view class="uParseLeft">
              <view class="uParseSpot">
              </view>
              <view class="uParseText">
                队服:
              </view>
            </view>
            <view class="">
              <view class="">
                可选尺寸 {{ storageData.teamUniform[0].dressSize }}
              </view>
              <image :src="storageData.teamUniform[0].pathChargeImg"
                     class="pathChargeImg" @click="showImage(storageData.teamUniform[0].pathChargeImg)">
            </view>
          </view>

          <view v-if="IncludeItems.length > 0" class="uParseItem">
            <view class="uParseLeft">
              <view class="uParseSpot">
              </view>
              <view class="uParseText">
                路线包含项:
              </view>
            </view>
            <view class="">
              <view v-for="(item,index) in IncludeItems" :key="index" class="">
                <view class="">
                  {{ item.chargeName }}
                </view>
                <image :src="item.pathChargeImg" class="pathChargeImg"
                       @click="showImage(item.pathChargeImg)">
              </view>

            </view>
          </view>
        </view>
        <view style="padding-bottom: 20rpx;">

        </view>
      </view>

      <view v-if="current == 2">
        <view class="uParseBox">
          <u-parse :content="storageData.remark"></u-parse>
        </view>
      </view>
    </view>


    <!-- 附近推荐 -->
    <view class="nearbyRecommendTwo">
      <view class="titleBox">
        <view class="transverse-lineTwo">
        </view>
        <view class="text28Two">附近推荐</view>
        <view class="transverse-lineTwo">
        </view>
      </view>
      <view class="listBox">
        <view class="listLeft">
          <view v-for="(item,index) in popularSiteOne" :key="index" class="">
            <view class="listItem" @click="shopsClick(item.id,item.type)">
              <view class="imgBox">
                <view v-if="item.type == 1" class="imgType">餐饮</view>
                <view v-if="item.type == 2" class="imgType imgTypeOne">住宿</view>
                <view v-if="item.type == 3" class="imgType imgTypeTwo">零售</view>
                <view v-if="item.type == 4" class="imgType imgTypeThree">平台</view>
                <image :src="item.shopImgList[0]" class="img"></image>
              </view>
              <view class="listName">
                {{ item.shopName }}
              </view>
              <view class="tagBox">
                <view v-for="(params,parIndex) in item.tags" :key="parIndex" class="">
                  <view class="tagItem">
                    {{ params }}
                  </view>
                </view>
              </view>
              <view class="capita">
                <view class="">
                  人均:
                </view>
                <view class="moneyBox">
                  <view class="icon">
                    ￥
                  </view>
                  <view class="money">
                    {{ item.consumptionPerPerson }}
                  </view>
                </view>
              </view>
            </view>

          </view>
        </view>
        <view class="listRight">
          <view v-for="(item,index) in popularSiteTwo" :key="index" class="">

            <view class="listItem" @click="shopsClick(item.id,item.type)">
              <view class="imgBox">
                <view v-if="item.type == 1" class="imgType">餐饮</view>
                <view v-if="item.type == 2" class="imgType imgTypeOne">住宿</view>
                <view v-if="item.type == 3" class="imgType imgTypeTwo">零售</view>
                <image :src="item.shopImgList[0]" class="img"></image>
              </view>
              <view class="listName">
                {{ item.shopName }}
              </view>
              <view class="tagBox">
                <view v-for="(params,parIndex) in item.tags" :key="parIndex" class="">
                  <view class="tagItem">
                    {{ params }}
                  </view>
                </view>
              </view>
              <view class="capita">
                <view class="">
                  人均:
                </view>
                <view class="moneyBox">
                  <view class="icon">
                    ￥
                  </view>
                  <view class="money">
                    {{ item.consumptionPerPerson }}
                  </view>
                </view>
              </view>
            </view>

          </view>


        </view>
      </view>

      <view class="separateBox">

      </view>
      <!-- <view class="nearbyRecommend">
        <view class="button">


        </view>
      </view> -->

      <view class="suspensionBox">
        <view class="shareBox">
          <button class="shareButton" open-type='share'>
            <image class="sharImg"
                   src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/shareIcon.png"></image>
            <view class="sharText">
              分享
            </view>
          </button>
        </view>
        <view v-if="signUp" class="shareBox addBox" @click="addClick">
          <image class="sharImg" src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/addIcon.png">
          </image>
          <view class="sharText">
            报名路线
          </view>
        </view>
        <view v-else="signUp" class="finish">
          线路报名已截止
        </view>
      </view>


      <tui-modal :show="isShowSheet" custom maskClosable padding="10" radius="15" @cancel="closeSheet">
        <view class="taskSheet">
          <image :src="taskBackGround" class="SheetBg">
          </image>
          <view class="sheetTitle">任务单</view>
          <view class="taskList">
            <scroll-view scroll-y="true">
              <view class="behaviorList">
                <text>◆行为类任务</text>
                <view v-for="(ite,index) in tasks" :key="index" class="listItem">
                  {{ ite.title || '该景点无任务' }}
                </view>
              </view>
              <view class="QAList">
                <text>◆问答类任务</text>
                <view v-for="(i,index) in questionTask" :key="index" class="listItem">
                  {{ i.title || '该景点无任务' }}
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
      </tui-modal>
    </view>
  </view>
</template>

<script>
import {
  hotPlanLineDetail,
  addHot
} from "@/api/challenge";

export default {
  data() {
    return {
      swiperList: [],
      markers: [],
      proposalId: '',
      polyline: [{
        points: [],
        color: "#1661B8",
        arrowLine: true,
        width: 5,
      },],
      storageData: "",
      label: ['历史文化', '红色之旅'],
      RouteLabel: ['自助亲朋行', '拼团游'],
      tabs: ['景点路线', '介绍说明', '用户须知'],
      current: 0,
      latitude: 23.1135, // 设置地图的纬度
      longitude: 114.4158, // 设置地图的经度
      scenic: [],
      // 控制是否展开
      isUnfolded: false,
      scenicMore: [],
      signUp: true,
      isShowSheet: false,
      questionTask: [],
      tasks: [],
      taskBackGround: '',
      popularSiteOne: [],
      popularSiteTwo: [],
      IncludeItems: []
    };
  },
  onLoad(data) {
    this.proposalId = data.id
    hotPlanLineDetail({
      proposalId: data.id
    }).then(res => {
      this.swiperList = []
      if (res.video) {
        this.swiperList.push({
          url: res.video,
          type: 'video'
        })
      }
      if (res.themeImg) {
        res.themeImg.forEach(item => {
          this.swiperList.push({
            url: item,
            type: 'image'
          })
        })
      }
      this.taskBackGround = res.taskBackGround

      this.popularSiteOne = []
      this.popularSiteTwo = []
      this.IncludeItems = []
      res.charges.forEach(item => {
        if (item.chargeName != '队服') {
          this.IncludeItems.push(item)
        }
      })


      res.lineShops.forEach(item => {
        if (this.popularSiteOne.length == this.popularSiteTwo.length) {
          this.popularSiteOne.push(item)
        } else {
          this.popularSiteTwo.push(item)
        }
      })


      this.storageData = res
      var now = new Date();
      var endDate = this.storageData.signEndTime;
      var startDate = this.storageData.startDate;
      var signEndTimeData = new Date(endDate);
      var startTimeData = new Date(startDate);

      var timestamp = now.getTime();
      var signEndTimeTime = signEndTimeData.getTime()
      var startTime = startTimeData.getTime()

      if ((timestamp - signEndTimeTime >= 0 && endDate != null) || (timestamp - startTime >= 0 &&
          endDate != null) || this.storageData.itineraryStatus >= 1) {
        this.signUp = false;
      } else {
        this.signUp = true;
      }

      if (this.storageData.scenicMapList.length > 2) {
        this.scenic = this.storageData.scenicMapList.slice(0, 2)
      } else {
        this.scenic = this.storageData.scenicMapList
      }
      this.scenicMore = this.storageData.scenicMapList

      this.markers = this.storageData.scenicMapList.map((el, index) => {
        return {
          width: 24,
          height: 45,
          id: el.id,
          label: {
            content: el.name,
          },
          callout: {
            content: `${index + 1}`,
            display: "ALWAYS",
            bgColor: "transparent",
            anchorY: 20,
          },
          latitude: el.y,
          longitude: el.x,
          iconPath: "https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/location0.png",
          // iconPath: `https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/location${index+1}.png`
        };
      });
      // 线
      this.polyline[0].points = this.storageData.scenicMapList.map((el) => {
        return {
          latitude: Number(el.y),
          longitude: Number(el.x),
        };
      });

    })
  },
  methods: {
    showImage(data) {
      uni.previewImage({
        current: data,
        urls: [data]
      })
    },
    playTask(index) {
      this.questionTask = this.scenicMore[index].questionTask
      this.tasks = this.scenicMore[index].tasks
      this.isShowSheet = true
    },
    shopsClick(id, type) {
      console.log(id, type);
      uni.navigateTo({
        url: '/pages/popular_destination/peripheryDetails?id=' + id
      });
    },
    //关闭任务单弹窗
    closeSheet() {
      this.isShowSheet = false
    },
    scenicEvent(index) {
      // console.log(this.scenicMore[index]);
      addHot({
        scenicId: this.scenicMore[index].id
      }).then(res => {
        // console.log('增加热度', res);
      })
      uni.navigateTo({
        url: '/pages/popular_destination/ScenicSpotDetails?id=' + this.scenicMore[index].id + '&y=' +
            uni
                .getStorageSync('latitude') + '&x=' + uni.getStorageSync('longitude')
      });
    },
    navigationClick(index) {
      const latitude = Number(this.scenicMore[index].y)
      const longitude = Number(this.scenicMore[index].x)
      uni.openLocation({
        latitude: latitude,
        longitude: longitude,
        success: function () {
          console.log("success");
        },
      });
    },
    handleChange(index) {
      this.current = index.index
    },
    toggleUnfold() {
      this.isUnfolded = !this.isUnfolded; // 切换展开状态
    },
    addClick() {
      if (uni.getStorageSync("userinfo").phone) {
        uni.navigateTo({
          url: '/pages/PopularRoute/SubmitRouteOrder?id=' + this.proposalId + '&lineType=' + this
              .storageData
              .lineType
        });
      } else {
        uni.showModal({
          title: "提示",
          content: "未登录,是否前往登录页面登录!",
          success: function (res) {
            if (res.confirm) {
              uni.navigateTo({
                url: "/pages/login/index",
              });
            } else if (res.cancel) {
            }
          },
        });
      }

    }
  }
};
</script>

<style lang="scss" scoped>
.swiper {
  height: 520rpx;
}

.swiper-image {
  width: 100%;
  height: auto;
}

.labelContainer {
  margin-top: 20rpx;
  display: flex;
  flex-wrap: wrap;
}

.Hot-route-card {
  padding: 20rpx 40rpx;
  background-color: #fff;

  .title {
    font-size: 36rpx;
    font-weight: 800;
  }
}

.label {
  padding-right: 10rpx;
}

.route-text {
  font-size: 28rpx;
  padding: 20rpx 0;
}

.title {
  font-size: 35rpx;
}


.hot-price {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .hot {
    padding-top: 20rpx;
    display: flex;

    .hot-image image {
      width: 32rpx;
      height: 32rpx;
    }

    .hot-text {
      font-size: 28rpx;
      color: #FF0000;
      margin-left: 8rpx;
    }
  }

  .price {
    display: flex;
    align-items: baseline;

    /* 使用Flexbox布局 */
    .commodity-prices-1 {
      color: #FF0000;
    }

    .commodity-prices-2 {
      color: #FF0000;
      font-size: 60rpx;
    }

    .commodity-prices-3 {
    }
  }
}


.content {
  background-color: #F2F2F2;
}


.Routebrief {
  margin-top: 20rpx;
  padding-left: 40rpx;
  padding-top: 40rpx;
  padding-right: 40rpx;
  background-color: #ffff;
  padding-bottom: 30rpx;
}

.type {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.RouteLabel-1 {
  display: flex;
  padding-left: 200rpx;
}

.Routebrief tui-tag {
  padding-left: 5rpx;
}

.HeadPortrait image {
  height: 50rpx;
  width: 50rpx;
}

.HeadPortrait-text {
  display: flex;
  margin-left: 200rpx;
}

.travelContainer {
  display: flex;
  justify-content: space-between;
}

.signUp-time {
  display: flex;
  justify-content: space-between;
}

.time {
  color: #FF0000;
}

.trip {
  display: flex;
  justify-content: space-between;
}

.trip-date {
}

.travel-time {
  display: flex;
  justify-content: space-between;
}

.travel-time2 {
  padding-left: 230rpx;
}

.content {
  background-color: #F2F2F2;
}

.tab-1 {
  background-color: #ffff;
  margin-top: 20rpx;
}

.map map {
  width: 100%;
  height: 100%;
  border-radius: 20rpx;
}

.map {
  width: 100%;
  margin-top: 60rpx;
  height: 400rpx;
  border-radius: 20rpx;
  border: 1px solid #ccc;
}

.itinerary {
  width: 100%;
  background-color: #ffff;
}

.layout {
  padding-left: 40rpx;
  padding-right: 40rpx;
}

.Number-of-attractions {
  margin-top: 20rpx;
  background-color: #F2F2F2;
  width: 100%;
  height: 90rpx;
  color: #757575;
  display: flex;
  align-items: center;
  border-radius: 20rpx;
  justify-content: center;
}

.icon image {
  width: 55rpx;
  height: 55rpx;
}

.Attraction-card {
  margin-top: 30rpx;
  display: flex;
}

.title-introductory {
  padding-left: 20rpx;

  .introductory {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}


.introductory {
  padding-top: 15rpx;
  width: 390rpx;
}

.line {
  width: 2rpx;
  height: 100%;
  background-color: transparent;
  border-left: 2rpx dashed #FF9804;
  margin-left: 20rpx;
}

.picture image {
  margin-left: 10rpx;
  width: 180rpx;
  height: 180rpx;
  border-radius: 10rpx;
}

.brief-introduction {
  display: flex;
}

.layout-4 {
  align-items: center;
  padding-bottom: 50rpx;
}

.navigation {
  display: flex;
  margin-top: 20rpx;
}

.uParseBox {
  margin: 40rpx;
  padding-bottom: 40rpx;
}

.navigation-text {
  width: 340rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #757575;
  margin-left: 8rpx;
}

.navigation-text2 {
  color: #757575;
}


.navigation-text2 {
  padding-left: 20rpx;
}

.navigation-text3 {
  color: #4286F5;
}

.navigation-icon2 {
  padding-left: 20rpx;
}

.playing {
  padding-top: 20rpx;
  display: flex;
}

.navigation-playing {
  background-color: #F2F2F2;
  height: 150rpx;
  border-radius: 10rpx;
  align-items: center;
}

.otherBox {
  background-color: #f2f2f2;
  font-size: 8rpx;
  margin: 0 40rpx 20rpx 40rpx;
  font-size: 24rpx;
  padding: 20rpx 32rpx 0 32rpx;

  .otherInformation {
    font-weight: 800;
    color: #212121;
    margin-bottom: 20rpx;
  }

  .uParseItem {
    display: flex;
    align-items: flex-start;
    padding-bottom: 20rpx;

    .uParseLeft {
      display: flex;
      align-items: center;

      .uParseSpot {
        width: 12rpx;
        height: 12rpx;
        border-radius: 50%;
        background: #aaaaaa;
      }

      .uParseText {
        width: 80rpx;
        margin: 0 20rpx;
        color: #757575;
      }
    }

    .pathChargeImg {
      width: 112rpx;
      height: 74rpx;
    }
  }
}

.richTextView {
  margin-top: 30rpx;
  width: 90%;
  min-height: 300rpx;
  overflow: scroll;
  text-align: justify;
  padding-bottom: 110rpx;

  .htmlContent {
    width: 100%;
    height: 100%;
  }
}

.playing-text {
  padding-left: 8rpx;
  color: #757575;
}

.playing-text2 {
  color: #4286F5;
}

.navigation {
  padding-top: 30rpx;
  padding-left: 15rpx;
}

.playing {
  padding-left: 15rpx;
}

.unfold-icon {
  display: flex;
  align-items: center;
  padding-top: 50rpx;
  padding-left: 48%;
  padding-bottom: 50rpx;
}

.unfold {
  color: #4286F5;
}

.title h1 {
  font-size: 22px;
  /* 增大字体大小*/
  font-weight: bold;
  /* 使字体加粗 */
  color: #333;
  /* 字体颜色 */
  padding-left: 40rpx;
}

.text26 {
  padding-top: 30rpx;
  padding-left: 50rpx;
  font-size: 20px;
  font-weight: bold;
}

.text28 {
  margin-top: 30rpx;
  /* padding-top: 30rpx; */
  padding-left: 300rpx;
  font-size: 20px;
  font-weight: bold;
}

.shop {
  background-color: #FFFFFF;
  width: 320rpx;
  margin-left: 40rpx;
  margin-right: 40rpx;
  margin-top: 40rpx;
  border-bottom-right-radius: 20rpx;
  border-bottom-left-radius: 20rpx;
}

.picture2 image {
  width: 100%;
  height: 350rpx;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
}

.text30 {
  padding-top: 20rpx;
  padding-left: 20rpx;
  font-size: 30rpx;
}

.Label-container {
  display: flex;
  /* 设置为flex容器 */
  flex-wrap: wrap;
  /* 允许换行 */
  padding-top: 20rpx;
  padding-left: 10rpx;
  padding-bottom: 10rpx;
  width: 350rpx;
}

.text32 {
  padding-top: 30rpx;
  padding-left: 20rpx;
}

.text33 {
  padding-top: 30rpx;
  padding-left: 30rpx;
  color: red;
}

.text34 {
  color: red;
  padding-top: 15rpx;
  font-size: 48rpx;
  padding-left: 10rpx;
  font-weight: bold;
}


.suspensionBox {
  width: 100%;
  height: 100rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  display: flex;
  color: white;
  font-size: 32rpx;

  .shareBox {
    width: 208rpx;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FF9804;

    .shareButton {
      width: 208rpx;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #FF9804;
      color: #fff;
    }

    .sharImg {
      width: 40rpx;
      height: 40rpx;
    }

    .sharText {
      margin-left: 12rpx;
    }

  }

  .addBox {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #4286F5;
  }

  .finish {
    flex: 1;
    height: 100%;
    line-height: 100rpx;
    text-align: center;
    background: #cccccc;

  }
}


.separateBox {
  padding-bottom: 120rpx;
}


.text-container {
  width: 90%;
  /* 容器宽度 */
  max-width: 600px;
  /* 最大宽度 */
  padding: 20px;
  /* 内边距 */
  border: 1px solid #ddd;
  /* 边框 */
  background-color: #fff;
  /* 背景颜色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 阴影效果 */
  text-align: justify;
  /* 文本两端对齐 */
}

.text-container img {
  max-width: 100%;
  /* 图片宽度不超过容器宽度 */
  height: auto;
  /* 高度自适应 */
  display: block;
  /* 图片作为块级元素显示 */
  margin: 0 auto;
  /* 图片水平居中 */
}

.text-container p {
  font-size: 16px;
  /* 段落字体大小 */
  line-height: 1.6;
  /* 行高 */
  margin-bottom: 1em;
  /* 段落外边距 */
}

.text-container a {
  color: #0645ad;
  /* 链接颜色 */
  text-decoration: none;
  /* 去除下划线 */
}

.text-container h1,
.text-container h2,
.text-container h3,
.text-container h4,
.text-container h5,
.text-container h6 {
  font-weight: bold;
  /* 标题加粗 */
  margin-bottom: 0.5em;
  /* 标题外边距 */
}

/* 任务清单 */
.taskSheet {
  width: 100%;
  height: 900rpx;
  overflow: hidden;
  position: relative;
}

.SheetBg {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 900rpx;
}

.SheetBg image {
  width: 100%;
  height: 100%;
}

.sheetTitle {
  margin: 30rpx 0rpx 0rpx 0rpx;
  font-size: 45rpx;
  font-family: '黑体';
  font-weight: 600;
  text-align: center;
}

.taskList {
  margin: 30rpx 0rpx 0rpx 0rpx;
  width: 90%;
  padding: 0rpx 20rpx;
  height: 650rpx;
  overflow: scroll;
}

.behaviorList,
.QAList {
  padding: 10rpx;
  overflow: auto;
}

.behaviorList text,
.QAList text {
  font-size: 30rpx;
  color: #FF5E5E;
  font-family: '黑体';
  font-weight: 600;
}

.listItem {
  // padding: 10rpx;
  color: #212121;
}

.nearbyRecommendTwo {

  .titleBox {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40rpx 0 20rpx 0;

    .transverse-lineTwo {
      width: 30px;
      height: 2px;
      background: #212121;
      margin: 0 20rpx;
    }

    .text28Two {
      font-size: 40rpx;
      font-weight: 800;
    }
  }

}


.shop {
  background-color: #FFFFFF;
  width: 320rpx;
  margin-left: 10rpx;
  margin-right: 10rpx;
  margin-top: 30rpx;
  border-radius: 10rpx;
}

.listBox {
  display: flex;
  padding: 32rpx;
  background-color: #f2f2f2;
}

.listLeft {
  margin-right: 32rpx;
}

.listItem {
  width: 326rpx;
  background: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.10);
  margin-bottom: 32rpx;
}

.imgBox {
  width: 100%;
  position: relative;
  border-radius: 20rpx 20rpx 0 0;

  .imgType {
    width: 92rpx;
    height: 40rpx;
    border-radius: 20rpx 0rpx 20rpx 0rpx;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ff9802;
    text-align: center;
    color: #fff;
    font-size: 24rpx;
    line-height: 40rpx;
    z-index: 10;
  }

  .imgTypeOne {
    background-color: #4186f5;
  }

  .imgTypeTwo {
    background-color: #8abc10;
  }

  .imgTypeThree {
    background-color: #ff0000;
  }

  .img {
    width: 100%;
    height: 310rpx;
    border-radius: 20rpx 20rpx 0 0;
  }


}

.listName {
  font-size: 28rpx;
  font-weight: 800;
  margin-left: 20rpx;
}

.tagBox {
  display: flex;
  flex-wrap: wrap;
  margin: 10rpx 0 20rpx 20rpx;

  .tagItem {
    color: #ff9802;
    padding: 0rpx 8rpx;
    border: 1px solid #ff9802;
    border-radius: 4px;
    margin: 0 10rpx 10rpx 0;
  }
}

.capita {
  border-top: 2rpx solid #e3e3e3;
  display: flex;
  align-items: baseline;
  padding: 20rpx 0 20rpx 20rpx;

  .moneyBox {
    display: flex;
    align-items: baseline;
    color: #ff0000;

    .money {
      font-size: 50rpx;
      font-weight: 800;
    }
  }
}
</style>
